<template>
  <div>
    <div class="headHint">活动图片</div>
    <el-row>
      <el-col :span="10">
        <el-input v-model="secondKeyWord" style="width:200px" placeholder="请输入搜索内容"/>
        <el-button type="primary" style="margin-left:10px;" @click="handleFilter">搜索</el-button>
      </el-col>
      <el-col :span="2" :offset="12">
        <el-button type="primary" icon="el-icon-plus" @click="addsecondActivity">新增活动</el-button>
      </el-col>
    </el-row>
    <el-table
      :data="pictureTableData.slice((secondCurrentPage-1)*secondPageSize,secondCurrentPage*secondPageSize)"
      :default-sort="{prop: 'typeIndex', order: 'ascending'}"
      border
      style="width: 100%;text-align:center;margin-top:20px;">
      <el-table-column :index="typeIndex" type="index" label="编号" align="center" width="100"/>
      <el-table-column prop="name" label="图片名称" sortable column-key="name" align="center"/>
      <el-table-column prop="url" label="图片展示" sortable column-key="url" align="center">
        <template slot-scope="scope">
          <img v-if="scope.row.url" :src="scope.row.url" style="width:100px;height:100px;">
          <span v-if="!scope.row.url">未上传</span>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注" sortable column-key="remark" align="center"/>
      <el-table-column label="操作" width="250" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" icon="el-icon-edit" @click="editPicture(scope)">编辑</el-button>
          <el-button
            type="danger"
            size="mini"
            icon="el-icon-delete"
            @click="deletePicture(scope.$index)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="block" style="margin:20px 0;">
      <el-pagination
        :current-page="secondCurrentPage"
        :page-sizes="[5, 10, 20]"
        :page-size="secondPageSize"
        :total="pictureTableData.length"
        background
        layout="total, sizes, prev, pager, next, jumper"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </div>
    <!-- 编辑弹框 -->
    <el-dialog :visible.sync="editDialogVisible" title="活动图片" width="30%">
      <div style="margin:20px 0;">
        <span style="width:100px;text-align:right;margin-right:20px;display:inline-block;">图片:</span>
        <el-upload
          :on-change="editUploadchange"
          :on-remove="editUploadRemove"
          :file-list="pictureTableData[editIndex].fileList"
          list-type="picture"
          action="https://jsonplaceholder.typicode.com/posts/"
          class="upload-demo"
          style="width:60%;display: inline-block;vertical-align: top;margin-top: -8px;"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
      </div>

      <div>
        <span style="width:100px;text-align:right;margin-right:20px;display:inline-block;">备注:</span>
        <el-input v-model="editRemark" style="width: 60%;"/>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editConfirm">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 新增活动弹框 -->
    <el-dialog :visible.sync="addActivityDialogVisible" title="活动图片" width="30%">
      <div style="margin:20px 0;">
        <span style="width:100px;text-align:right;margin-right:20px;display:inline-block;">图片:</span>
        <el-upload
          :on-change="addUploadchange"
          :on-remove="addUploadRemove"
          :file-list="editFileList"
          list-type="picture"
          action="https://jsonplaceholder.typicode.com/posts/"
          class="upload-demo"
          style="width:60%;display: inline-block;vertical-align: top;margin-top: -8px;"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
      </div>

      <div>
        <span style="width:100px;text-align:right;margin-right:20px;display:inline-block;">备注:</span>
        <el-input v-model="editRemark" style="width: 60%;"/>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addCancelDialogVisible">取 消</el-button>
        <el-button type="primary" @click="addConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      secondKeyWord: '',
      pictureTableData: [
        {
          name: 'QRcode.png',
          url: require('../../../../assets/distribution/QRcode.png'),
          remark: '备注信息',
          fileList: [{ name: 'QRcode.png', url: require('../../../../assets/distribution/QRcode.png') }]
        },
        {
          name: 'poster.png',
          url: require('../../../../assets/distribution/poster.png'),
          remark: '备注信息',
          fileList: [{ name: 'poster.png', url: require('../../../../assets/distribution/poster.png') }]
        }
      ],
      // 分页数据
      secondCurrentPage: 1,
      secondPageSize: 5,
      // 编辑弹框默认是否显示
      editDialogVisible: false,
      editIndex: '0',
      editRemark: '',
      editFileList: [],
      // 新增活动弹框默认是否显示
      addActivityDialogVisible: false
    }
  },
  methods: {
    // 动态生成表格编号
    typeIndex(index) {
      return index + (this.secondCurrentPage - 1) * this.secondPageSize + 1
    },
    handleFilter() { },
    // 分页设置
    handleCurrentChange(arg) {
      this.secondCurrentPage = arg
    },
    handleSizeChange(arg) {
      this.secondPageSize = arg
    },
    // 新增活动事件
    addsecondActivity() {
      this.addActivityDialogVisible = true
    },
    // 新增图片取消事件
    addCancelDialogVisible() {
      this.editFileList = []
      this.editRemark = ''
      this.addActivityDialogVisible = false
    },
    // 新增图片确定事件
    addConfirm() {
      this.pictureTableData.push({ name: '', url: '', remark: '' })
      const addList = this.pictureTableData[this.pictureTableData.length - 1]
      addList.name = this.editFileList[0].name
      addList.url = this.editFileList[0].url
      addList.remark = this.editRemark
      // 清空内容
      this.editFileList = []
      this.editRemark = ''
      this.addActivityDialogVisible = false
    },
    // 新增图片上传限制
    addUploadchange(file, fileList) {
      this.editFileList = fileList.slice(-1)
    },
    // 新增图片移除事件
    addUploadRemove(file, fileList) {
      this.editFileList.splice(0, 1)
    },
    // 编辑图片列表事件
    editPicture(scope) {
      this.editIndex = scope.$index
      this.editRemark = scope.row.remark
      const PicList = this.pictureTableData[this.editIndex]
      if (PicList.fileList[0]) {
        PicList.fileList[0].name = PicList.name
        PicList.fileList[0].url = PicList.url
      } else if (!PicList.fileList[0] && PicList.name) {
        PicList.fileList.push({ name: '', url: '' })
        PicList.fileList[0].name = PicList.name
        PicList.fileList[0].url = PicList.url
      }
      setTimeout(() => {
        this.editDialogVisible = true
      }, 500)
    },
    // 编辑图片上传限制
    editUploadchange(file, fileList) {
      this.pictureTableData[this.editIndex].fileList = fileList.slice(-1)
    },
    // 编辑图片移除事件
    editUploadRemove(file, fileList) {
      this.pictureTableData[this.editIndex].fileList.splice(0, 1)
    },
    // 编辑图片弹框确定事件
    editConfirm() {
      const PicList = this.pictureTableData[this.editIndex]
      PicList.remark = this.editRemark
      if (PicList.fileList[0]) {
        PicList.name = PicList.fileList[0].name
        PicList.url = PicList.fileList[0].url
      } else {
        PicList.name = ''
        PicList.url = ''
      }
      this.editRemark = ''
      this.editDialogVisible = false
    },
    // 删除图片列表
    deletePicture(index) {
      const listIndex = (this.secondCurrentPage - 1) * this.secondPageSize + index
      this.$confirm('确定要删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.pictureTableData.splice(listIndex, 1)
        this.$message({
          type: 'success',
          message: '删除成功'
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.headHint {
  color: rgb(52, 172, 228);
  padding: 10px 30px;
  background: #e4fafd;
  margin: 20px 0;
  overflow: hidden;
}
</style>

